<template>
  <div class="grid" ref="interviews">
    <div class="col-12"  style="height: 100px;">
      <HeaderToolBar @submit-search="searchDetail"
                     @submit-reply="replyDetail"
                     @click-tag="tagDetail"
                     @edit-click="editClickHandler"
                     placeholder="搜索相关面经"
                     btn-text="发布面经"
                     customer-edit-btn
                     :show-tips="false"
                     :show-tag="false"
                     :search-loading="detailLoading"
                     :replay-btn-show="recordSearch.length > 1"/>
    </div>
    <!-- 左侧导航栏 -->
    <StickyPanel class="col-2 mt-4" top="40px" :dom="interviews">
      <template #content>
        <LeftMenu/>
      </template>
    </StickyPanel>
    <!-- 内容 -->
    <div class="col-10 flex align-items-start mt-2">
      <Card style="width: 23em" class="inline-block m-2 col-3">
        <template #title>
          <p class="interviews-title">
            什么是索引下推？
          </p>
        </template>
        <template #subtitle>
            <p class="interviews-description">SQL</p>
        </template>
        <template #content>
            <p class="interviews-text" style="text-indent: 1em;">索引下推的应用场景是在联合索引的情况下，假设我们当前有一个联合索引是 A，B，当使用该联合索引按顺序作为条件查询时，会先走A索引获取其数据表，然后再获取到的数据表中筛选出符合B条件的数据。这一过程叫做索引下推，如果没有索引下推，那么在获取条件A的数据表之后，会从中获取数据表的ID，然后返回聚簇索引获取数据表，然后再筛选出B条件数据。索引下推的应用场景是在联合索引的情况下，假设我们当前有一个联合索引是 A，B，当使用该联合索引按顺序作为条件查询时，会先走A索引获取其数据表，然后再获取到的数据表中筛选出符合B条件的数据。这一过程叫做索引下推，如果没有索引下推，那么在获取条件A的数据表之后，会从中获取数据表的ID，然后返回聚簇索引获取数据表，然后再筛选出B条件数据。索引下推的应用场景是在联合索引的情况下，假设我们当前有一个联合索引是 A，B，当使用该联合索引按顺序作为条件查询时，会先走A索引获取其数据表，然后再获取到的数据表中筛选出符合B条件的数据。这一过程叫做索引下推，如果没有索引下推，那么在获取条件A的数据表之后，会从中获取数据表的ID，然后返回聚簇索引获取数据表，然后再筛选出B条件数据。</p>
        </template>
        <template #footer>
          <div class="w-12 text-right">
            <Button icon="pi pi-check" label="有帮助😄" />
            <Button icon="pi pi-comment" @click="showDetails = true" label="讨论/查看🧐" class="p-button-secondary" style="margin-left: .5em" />
          </div>
        </template>
      </Card>
      <Card style="width: 23em" class="inline-block m-2 col-3">
        <template #title>
          <p class="interviews-title">
            什么是索引下推？
          </p>
        </template>
        <template #subtitle>
            <p class="interviews-description">SQL</p>
        </template>
        <template #content>
            <p class="m-text-overflow-ellipsis-10" style="text-indent: 1em;">索引下推的应用场景是在联合索引的情况下，假设我们当前有一个联合索引是 A，B，当使用该联合索引按顺序作为条件查询时，会先走A索引获取其数据表，然后再获取到的数据表中筛选出符合B条件的数据。这一过程叫做索引下推，如果没有索引下推，那么在获取条件A的数据表之后，会从中获取数据表的ID，然后返回聚簇索引获取数据表，然后再筛选出B条件数据。</p>
        </template>
        <template #footer>
          <div class="w-12 text-right">
            <Button icon="pi pi-check" label="有帮助😄" />
            <Button icon="pi pi-comment" @click="showDetails = true" label="讨论/查看🧐" class="p-button-secondary" style="margin-left: .5em" />
          </div>
        </template>
      </Card>      
      <Card style="width: 23em" class="inline-block m-2 col-3">
        <template #title>
          <p class="interviews-title">
            什么是索引下推？
          </p>
        </template>
        <template #subtitle>
            <p class="interviews-description">SQL</p>
        </template>
        <template #content>
            <p class="m-text-overflow-ellipsis-10" style="text-indent: 1em;">索引下推的应用场景是在联合索引的情况下，假设我们当前有一个联合索引是 A，B，当使用该联合索引按顺序作为条件查询时，会先走A索引获取其数据表，然后再获取到的数据表中筛选出符合B条件的数据。这一过程叫做索引下推，如果没有索引下推，那么在获取条件A的数据表之后，会从中获取数据表的ID，然后返回聚簇索引获取数据表，然后再筛选出B条件数据。</p>
        </template>
        <template #footer>
          <div class="w-12 text-right">
            <Button icon="pi pi-check" label="有帮助😄" />
            <Button icon="pi pi-comment" @click="showDetails = true" label="讨论/查看🧐" class="p-button-secondary" style="margin-left: .5em" />
          </div>
        </template>
      </Card>  
      <Card style="width: 23em" class="inline-block m-2 col-3">
        <template #title>
          <p class="interviews-title">
            什么是索引下推？
          </p>
        </template>
        <template #subtitle>
            <p class="interviews-description">SQL</p>
        </template>
        <template #content>
            <p class="m-text-overflow-ellipsis-10" style="text-indent: 1em;">索引下推的应用场景是在联合索引的情况下，假设我们当前有一个联合索引是 A，B，当使用该联合索引按顺序作为条件查询时，会先走A索引获取其数据表，然后再获取到的数据表中筛选出符合B条件的数据。这一过程叫做索引下推，如果没有索引下推，那么在获取条件A的数据表之后，会从中获取数据表的ID，然后返回聚簇索引获取数据表，然后再筛选出B条件数据。</p>
        </template>
        <template #footer>
          <div class="w-12 text-right">
            <Button icon="pi pi-check" label="有帮助😄" />
            <Button icon="pi pi-comment" @click="showDetails = true" label="讨论/查看🧐" class="p-button-secondary" style="margin-left: .5em" />
          </div>
        </template>
      </Card>  
    </div>
    <!-- 详情/讨论框-->
    <Dialog header="Header" v-model:visible="showDetails" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
      <div v-for="i in 2" :key="i">
          <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
              laborum.
          </p>
          <br />
          <p>
              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
              enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
              consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
              nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
          </p>
          <br />
          <p>
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
              culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
              quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
              molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
          </p>
          <br />
      </div>
      <template #footer>
          <Button label="No" icon="pi pi-times" @click="showDetails = false" class="p-button-text"/>
          <Button label="Yes" icon="pi pi-check" @click="showDetails = false" autofocus />
      </template>
    </Dialog>
    <!-- 编辑器弹框 -->
    <EditorDialog :show="openEditor"
                  max-weight="80vw"
                  :input-value="submitInfo.title"
                  @close="editorCloseHandler"
                  @editor-change="editorChangeHandler"
                  @input-change="editorInputChangeHandler"
                  editor-place-holder="你是怎么样回答的？"
                  text-placeholder="您面试遇到了什么问题？">
      <template #footer>
        <div class="flex justify-content-end">
          <Button @click="submitHandler" label="提交"></Button>
        </div>
      </template>
    </EditorDialog> 
  </div>
</template>


<script lang="ts" setup>
/** JS */
import {ref, Ref, reactive, onMounted, nextTick, watch} from 'vue';
import {InterviewsEntity} from '@/interface/interviews/entity/InterviewsEntity';
import {FeedbackService, Paging} from '@/utils/ApiRequest';
import {useRouter} from 'vue-router';
import Cache from '@/utils/Cache';
/** 组件 */
import Avatar from 'primevue/avatar';
import Card from 'primevue/card';
import Dialog from 'primevue/dialog';
import HeaderToolBar from '@/components/toolbar/HeaderToolBar.vue';
import EditorDialog from '@/components/editor/Dialog/EditorDialog.vue';
import CommonHeaderToolBar from '@/components/toolbar/CommonHeaderToolBar.vue';
import StickyPanel from '@/components/panel/StickyPanel.vue';
import LeftMenu from '@/components/menu/LeftMenu.vue';
import {encrypt, decrypt} from '@/utils/PakoUtils';
import toast from "@/utils/Toast";

const router = useRouter(),
    cache = new Cache(),
    userMsg = cache.get('userMsg'),
    $ = require('jquery'),
    interviews = ref(null);
/** 查看/讨论框 */
const showDetails = ref(false), detailLoading = ref(false), recordSearch = ref([])
/** 搜索文章 */
const searchDetail = async (val) => {
      console.log(val)
    },
    /** 恢复文章 */
    replyDetail = async () => { console.log('reply') },
    /** 点击标签 */
    tagDetail = async (val) => { console.log(val) },
    editClickHandler = async () => {
      openEditor.value = true
    }

const openEditor = ref(false),
      showEditor = ref(userMsg !== undefined),
      hasContent = ref(false);
let submitInfo: InterviewsEntity = reactive({
  title: '',
  content: '',
  answer: ''
})

// 编辑器关闭
const editorCloseHandler = (val) => {
      openEditor.value = val;
    },
    // 编辑器修改
    editorChangeHandler = (editor) => {
      submitInfo.content = editor.md;
    },
    // 输入框修改
    editorInputChangeHandler = (val) => {
      submitInfo.title = val;
    },
    submitHandler = () => {
      console.log(submitInfo)
    }
</script>

<style lang="less" scoped>
.interviews-title {
}

.interviews-description {
  transition: .15s color ease-in-out;
  width: fit-content !important;
  &:hover {
    cursor: pointer;
    color: red !important;
  }
}

.interviews-text {
  height: 190px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 9 !important; /*超出3行部分显示省略号，去掉该属性 显示全部*/
  -webkit-box-orient: vertical !important;
}
</style>